<template>
    <div class="app-container">
        <div class="table-container">
            <el-table ref="orderTable" :data="list" style="width: 100%;" v-loading="listLoading" border>
                <el-table-column v-for="(item, index) in column" :label="item.name" :key="index" :width="item.width"
                    :align="item.align">
                    <template slot-scope="scope">{{ scope.row[item.key] }}</template>
                </el-table-column>
                <el-table-column label="操作" width="250" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleCompanyDetail(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize" :page-sizes="[5, 10, 15]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { fetchFundList } from '@/api/fund.js'
const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
};

const column = [
    {
        name: '公司名称',
        align: 'center',
        with: '120',
        key: 'companyName',
    }, {
        name: '基金AUM',
        align: 'center',
        with: '120',
        key: 'aum',
    }, {
        name: '基金名称',
        align: 'center',
        with: '120',
        key: 'fundName',
    }, {
        name: '主要策略',
        align: 'center',
        with: '120',
        key: 'mainStrategy',
    }, {
        name: '策略AUM',
        align: 'center',
        with: '120',
        key: 'strategyAum',
    },
]

const columnDetails = [
    ...column,
    {
        name: '行业分布',
        align: 'center',
        with: '120',
        key: 'industryDistribution',
    }, {
        name: '地区分布',
        align: 'center',
        with: '120',
        key: 'geographicalDistribution',
    }, {
        name: '基金简介',
        align: 'center',
        with: '120',
        key: 'fundDescription',
    }, {
        name: '平均仓位',
        align: 'center',
        with: '120',
        key: 'averagePosition',
    }, {
        name: '平均净仓位',
        align: 'center',
        with: '120',
        key: 'averageNetPosition',
    }, {
        name: '组合名字数',
        align: 'center',
        with: '120',
        key: 'totalNumberOfHoldings',
    }, {
        name: '组合集中度',
        align: 'center',
        with: '120',
        key: 'topHoldingsPercentage',
    }, {
        name: '组合换手率',
        align: 'center',
        with: '120',
        key: 'turnoverRate',
    }, {
        name: '投资者结构',
        align: 'center',
        with: '120',
        key: 'investorComposition',
    },
]
export default {
    name: "orderList",
    computed: {
        ...mapGetters([
            'userId',
        ])
    },
    components: {},
    data() {
        return {
            listQuery: Object.assign({}, defaultListQuery),
            listLoading: true,
            list: null,
            total: null,
            column,
            currentDetail: {},
            currentCompanyId: ''
        }
    },
    mounted() {
        const route = this.$route;
        if(route.name === 'companyDetail'){
            this.listQuery.companyId = route.query.id
            this.currentCompanyId = route.query.id
        }
        this.getList();
    },
    methods: {
        handleSearchList() {
            this.listQuery.pageNum = 1;
            this.getList();
        },
        handleCompanyDetail(row) {
            const query = this.currentCompanyId ? {
                id: row.fundId,
                companyId: this.currentCompanyId
            } : { id: row.fundId }
            this.$router.push({ path: '/funds/fundDetail', query: query  })
        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        getList() {
            this.listLoading = true;
            fetchFundList(this.listQuery).then(response => {
                this.listLoading = false;
                this.list = response.data.list;
                this.total = response.data.total;
            });
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },
    }
}
</script>
<style scoped>
.input-width {
    width: 203px;
}

.detail-modal {
    width: 98%;
    height: calc(100vh - 120px);
    overflow-y: scroll;
}
</style>
  
  
  